<template>
  <div id="visual">
    <div class="vissual-box">
      <div class="visual-left">
        <div class="top">
          <div class="item">
            <p class="name">常用推荐</p>
            <el-select
              v-model="commonValue"
              placeholder="请选择"
              @change="selectTemplate"
            >
              <el-option
                v-for="item in commonList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item left">
            <p class="name">X轴</p>
            <el-select
              class="el-input_xy"
              v-model="send.pageX"
              placeholder="请选择"
              @change="selectValue($event, 1)"
            >
              <el-option
                v-for="item in pageXList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
            <div class="rotation">
              <div class="circle" @click="turn"></div>
            </div>
          </div>
          <div class="item left">
            <p class="name">Y轴</p>
            <el-select
              class="el-input_xy"
              v-model="send.pageY"
              placeholder="请选择"
              @change="selectValue($event, 2)"
            >
              <el-option
                v-for="item in pageYList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">气泡大小</p>
            <el-select
              v-model="send.bubble"
              placeholder="请选择"
              @change="selectValue($event, 3)"
            >
              <el-option
                v-for="item in bubbleList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">气泡颜色</p>
            <el-select
              v-model="send.bubbleColor"
              placeholder="请选择"
              @change="selectValue($event, 4)"
            >
              <el-option
                v-for="item in bubbleColorList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <p class="name">选股策略</p>
            <el-select
              v-model="strategyVal"
              placeholder="请选择"
              @change="selectType"
            >
              <el-option
                v-for="item in strategyList"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="item">
          <p class="name">股票池</p>
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
          <div class="item">
            <p class="name">指数</p>
            <el-select
              v-model="indexVal"
              placeholder="请选择"
              @change="selectType"
            >
              <el-option
                v-for="item in indexList"
                :key="item.id"
                :label="item.stockName"
                :value="item.stockId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">行业</p>
            <el-select
              v-model="blockVal"
              placeholder="请选择"
              @change="selectType"
            >
              <el-option
                v-for="item in block"
                :key="item.id"
                :label="item.stockName"
                :value="item.stockId"
              >
              </el-option>
            </el-select>
          </div>
          <!-- <div class="item">
          <p class="name">主题</p>
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
          <div class="item">
            <p class="name">流通市值</p>
            <el-select
              v-model="flowVal"
              placeholder="请选择"
              @change="selectType"
            >
              <el-option
                v-for="(item, index) in flowValList"
                :key="index"
                :label="item.name"
                :value="item.val"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">历史成交量</p>
            <el-select
              v-model="tradeVolumeMonth3"
              placeholder="请选择"
              @change="selectType"
            >
              <el-option
                v-for="(item, index) in tradeVolumeMonthList"
                :key="index"
                :label="item.name"
                :value="item.val"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="visual-right">
        <div class="title">
          <span class="coord">X轴坐标</span>

          <el-input-number
            @change="numberChange1"
            v-model="valueX[0]"
            :controls="false"
          ></el-input-number>
          <span class="line">--</span>
          <el-input-number
            @change="numberChange1"
            v-model="valueX[1]"
            :controls="false"
          ></el-input-number>

          <span class="coord">Y轴坐标</span>

          <el-input-number
            @change="numberChange2"
            v-model="valueY[0]"
            :controls="false"
          ></el-input-number>
          <span class="line">--</span>

          <el-input-number
            @change="numberChange2"
            v-model="valueY[1]"
            :controls="false"
          ></el-input-number>
          <span class="reset" @click="reset"
            ><i class="el-icon-refresh-left"></i>恢复默认</span
          >
        </div>
        <div class="slider-rows">
          <el-slider
            range
            :step="step"
            v-model="slideX"
            tooltip-class="ttc"
            :max="maxminX[1]"
            :min="maxminX[0]"
            @change="sliderChangeX"
          ></el-slider>
        </div>
        <div class="slider-column">
          <el-slider
            v-model="slideY"
            range
            :step="step"
            @change="sliderChangeY"
            :max="maxminY[1]"
            :min="maxminY[0]"
            vertical
            height="580px"
          >
          </el-slider>
        </div>
        <div
          id="container"
          style="height: 684px; min-width: 310px; margin-right: 90px"
        ></div>
      </div>
    </div>

    <div class="visual-footer">
      <div class="hint">解释说明：{{ hint }}</div>
      <div class="color">
        <div
          class="color-item"
          :style="{ background: item.color }"
          v-for="item in colorBlock"
          :key="item.num"
        >
          {{ item.num }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  queryOption,
  queryJson,
  getblockList,
  getIndexList,
} from "../api/index";
import { blockColor, colorType, XGCL } from "../script/blockColor";
import * as Highcharts from "highcharts";
import { dataFormat, unitFormat } from "../script/util";
import { flowValList, tradeVolumeMonthList } from "../script/dataInit";
import HighStock from "highcharts/highstock";
// import * as Exporting from "highcharts/modules/exporting";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
var chart;
export default {
  data() {
    return {
      dataList: [],
      value: "",
      step: 0.01,
      slideX: [0, 0], //rows滑块
      slideY: [0, 0], //column滑块
      maxminX: [],
      maxminY: [],
      block: [], //行业版块
      indexList: [], //指数列表
      strategyList: XGCL, //策略列表
      flowValList: flowValList, //流通市值
      tradeVolumeMonthList: tradeVolumeMonthList, //历史成交量
      flowVal: "",
      tradeVolumeMonth3: "",
      indexVal: "", //指数
      blockVal: "", //版块
      strategyVal: "", //策略
      hint: "", //解释说明
      colorBlock: [], //底部色值块
      titleX: "",
      titleY: "",
      commonValue: 5,
      input: "",
      send: {
        pageX: "",
        pageY: "",
        bubble: "",
        bubbleColor: "",
      },
      commonList: [
        { label: "估值VS业绩选股", value: 1 },
        { label: "成长性VS估值选股", value: 2 },
        { label: "股价表现VS成交量选股", value: 3 },
        { label: "股价表现VS行业选股", value: 4 },
        { label: "盘面VS股价涨跌", value: 5 },
        { label: "估值VS股价涨跌", value: 6 },
        // { label: "行业VS股价涨跌", value: 7 },
        // { label: "分析师观点VS股价涨跌", value: 8 },
      ], //常用模板
      pageXList: [], //X轴
      pageYList: [], // Y轴
      bubbleList: [], //气泡大小
      bubbleColorList: [], //气泡颜色
    };
  },
  computed: {
    valueX() {
      return JSON.parse(JSON.stringify(this.slideX));
    },
    valueY() {
      return JSON.parse(JSON.stringify(this.slideY));
    },
  },
  async mounted() {
    this.getblockList();
    this.getIndexList();
    await queryOption().then((back) => {
      if (back.status == 1) {
        let res = back.data;
        this.pageXList = res.data.filter((item) => item.showX === 1);
        this.pageYList = res.data.filter((item) => item.showY === 1);
        this.bubbleList = res.data.filter((item) => item.useBubble === 1);
        this.bubbleColorList = res.data.filter(
          (item) => item.useBubbleColor === 1
        );
        this.bubbleList.unshift({ id: 1, fieldName: "", fieldSname: "常规" });
        this.bubbleColorList.unshift({
          id: 1,
          fieldName: "",
          fieldSname: "常规",
        });
        this.selectTemplate(5);
      }
    });

    // this.drow();
  },
  methods: {
    turn() {
      const x = this.send.pageX;
      this.send.pageX = this.send.pageY;
      this.send.pageY = x;
      this.queryJson();
    },
    reset() {
      this.slideX = this.maxminX;
      this.slideY = this.maxminY;
      // chart.xAxis[0].setExtremes(this.maxminX[0], this.maxminX[1]);
      // chart.yAxis[0].setExtremes(this.maxminY[0], this.maxminY[1]);
      chart.zoomOut();
    },
    numberChange1() {
      this.slideX = this.valueX;
      chart.xAxis[0].setExtremes(this.slideX[0], this.slideX[1]);
    },
    numberChange2() {
      this.slideY = this.valueY;
      // console.log(this.slideY)
      chart.yAxis[0].setExtremes(this.slideY[0], this.slideY[1]);
    },

    sliderChangeY() {
      // console.log(this.slideY)
      chart.yAxis[0].setExtremes(this.slideY[0], this.slideY[1]);
    },
    sliderChangeX() {
      // console.log(this.slideX)
      chart.xAxis[0].setExtremes(this.slideX[0], this.slideX[1]);
    },
    //行业列表
    async getblockList() {
      await getblockList().then((back) => {
        if (back.status == 1) {
          // this.block = res.data.slice(0,28);
          this.block = back.data.data;
          this.block.unshift({ id: 1, stockId: "", stockName: "全部" });
        }
      });
    },

    //指数列表
    async getIndexList() {
      await getIndexList().then((back) => {
        if (back.status == 1) {
          this.indexList = back.data.data;
          this.indexList.unshift({ id: 1, stockId: "", stockName: "全部" });
        }
      });
    },
    selectValue(val, type) {
      // console.log(val,type)
      switch (type) {
        case 1:
          this.send.pageX = val;
          break;
        case 2:
          this.send.pageY = val;
          break;
        case 3:
          this.send.bubble = val;
          break;
        case 4:
          this.send.bubbleColor = val;
          break;
      }
      this.queryJson();
      this.reset();
    },
    selectType(val) {
      this.queryJson();
      this.reset();
    },
    selectTemplate(val) {
      console.log(val);
      switch (val) {
        case 1: //估值VS业绩选股
          this.send = {
            pageX: "shiyingPe",
            pageY: "incJ",
            bubble: "", //常规
            bubbleColor: "priceChgWeek",
          };
          this.hint =
            "通过估值和业绩指标，寻找低估值绩优股，气泡越靠左上，越可能是低估值绩优股。颜色越红，估值修复越明显；越绿，越可能是价值洼地。";
          break;
        case 2: //成长性VS估值选股
          this.send = {
            pageX: "epsRateQuarter",
            pageY: "shiyingPe",
            bubble: "flowVal", //流通市值
            bubbleColor: "priceChgMonth",
          };
          this.hint =
            "通过成长和估值指标，寻找正处于业绩增长期而股价未充分反应个股。气泡越靠右下，气泡越小，未来成长性可能越强。";
          break;
        case 3: //股价表现VS成交量选股
          this.send = {
            pageX: "priceChgWeek", // 近1周涨跌幅
            pageY: "ma20Chg", //相对MA20
            bubble: "flowVal", //流通市值
            bubbleColor: "tradeVolumeRelative",
          };
          this.hint =
            "通过量价指标，寻找近期资金主攻个股。气泡整体呈右上倾斜，越靠右上，近期股价异动越大；颜色越亮则成交越活跃，越暗则成交尚未激活。";
          break;
        case 4: //股价表现VS行业选股
          this.send = {
            pageX: "priceChgWeek", // 近1周涨跌幅
            pageY: "ma20Chg", //相对MA20
            bubble: "flowVal", //流通市值
            bubbleColor: "", //行业
          };
          this.hint =
            "通过股价和行业指标，寻找近期资金主攻个股及行业。气泡整体右上倾斜，越靠右上，近期股价异动越大，股性越活跃。";
          break;
        case 5: //盘面VS股价涨跌
          this.send = {
            pageX: "priceChgMonth", //近一月涨跌幅
            pageY: "epsRateNext3", //EPS增长率(未来3年)
            bubble: "flowVal", //流通市值
            bubbleColor: "priceChgMonth",
          };
          this.hint =
            "从未来成长性及盘面大小，判断近1月强势股和弱势股为哪一类。例如：高成长大盘股近期强势，低成长小盘股近期弱势。";
          break;
        case 6: //估值VS股价涨跌
          this.send = {
            pageX: "priceChgMonth",
            pageY: "shiyingPe", //市盈率
            bubble: "", //常规
            bubbleColor: "priceChgMonth",
          };
          this.hint =
            "从估值的角度，判断近1月强势股和弱势股为哪一类。例如：低估值股票近期强势，高估值股票近期弱势。";
          break;
        // case 7://行业VS股价涨跌
        //   this.send = {
        //     pageX: "", //行业
        //     pageY: "shiyingPe",//市盈率
        //     bubble: "flowVal", //常规
        //     bubbleColor: "priceChgWeek",
        //   };
        //   this.hint= "通过估值和涨跌指标，寻找近期热点行业及热门股的估值属性。某一竖轴方向红色气泡越多，则关注度越高；距离X轴越近的越红，则低估值股涨势越好。"
        //   break;
        // case 8://分析师观点VS股价涨跌
        //   this.send = {
        //     pageX: "", //分析师观点
        //     pageY: "", //目标价格
        //     bubble: "", //常规
        //     bubbleColor: "tradeVolumeRelative", //相对成交量
        //   };
        //   this.hint="通过分析师预期，选择上涨空间较高的个股。距离X轴的距离越远，股价预期上涨空间越高；颜色越亮则成交越活跃，越暗则成交尚未激活。"
        //   break;
      }
      this.queryJson();
    },
    setExtremes(arr) {
      chart.yAxis[0].setExtremes(arr[0], arr[1]);
      chart.xAxis[0].setExtremes(2, 4);
    },

    async queryJson() {
      // colorType(this.send.bubbleColor)
      this.colorBlock = blockColor(this.send.bubbleColor);

      console.log("block", blockColor(this.send.bubbleColor));

      var newObj = {};
      var newArr = [
        "tradeVolumeMonth3",
        "flowVal",
        "priceChg",
        "marketVal",
        "turnoverRatio",
        "priceNow",
      ];

      var obj = Object.values(this.send);
      for (let i = 0; i < obj.length; i++) {
        if (obj[i]) {
          newObj[obj[i]] = "[-99999999999,]";
          newArr.push(obj[i]);
        }
      }

      console.log("OBJ", newObj);

      if (this.tradeVolumeMonth3) {
        newObj.tradeVolumeMonth3 = this.tradeVolumeMonth3;
      }
      if (this.flowVal) {
        newObj.flowVal = this.flowVal;
      }
      if (this.indexVal) {
        newObj.scope_indexIds = this.indexVal;
      }
      if (this.blockVal) {
        newObj.scope_blockIds = this.blockVal;
      }
      if (this.strategyVal) {
        newObj.scope_poolTypes = this.strategyVal;
      }

      const showField = newArr.join(",");
      await queryJson({ ...newObj, showField: showField }).then((back) => {
        if (back.status == 1) {
          let res = back;
          console.log(res, "back===8888");

          //  const res = await queryJson({showField:showField});
          // const res = await queryJson(json);
          // console.log(res.data.resultList);
          console.log(this.slideY);

          // var arr = [0.1, 2, 3, -4, 5];

          // console.log("send>>",this.send.pageX);

          var arr1 = res.data.resultList.map((item) =>
            dataFormat(item[this.send.pageX])
          );

          var arr2 = res.data.resultList.map((item) =>
            dataFormat(item[this.send.pageY])
          );

          //  console.log(arr);

          var a = Math.min(...arr1);
          var b = Math.max(...arr1);
          var c = Math.min(...arr2);
          var d = Math.max(...arr2);

          this.$set(this.slideX, 0, a);
          this.$set(this.slideX, 1, b);
          this.$set(this.slideY, 0, c);
          this.$set(this.slideY, 1, d);

          this.maxminY = this.slideY;
          this.maxminX = this.slideX;

          res.data.fieldList.map((item) => {
            if (item.fieldName == this.send.pageX) {
              this.titleX = item.fieldDesc;
            }
            if (item.fieldName == this.send.pageY) {
              this.titleY = item.fieldDesc;
            }
          });
          var zList = [];

          this.dataList = res.data.resultList.map((item) => {
            console.log(item.securityId);
            item.name = item.stockName;
            item.x = dataFormat(item[this.send.pageX]);
            item.y = dataFormat(item[this.send.pageY]);
            // item.z = item[this.send.bubble] ? dataFormat(item[this.send.bubble]) : 6;
            item.z = dataFormat(item[this.send.bubble]);

            item.ltsz = unitFormat(item.flowVal);
            item.zdf = unitFormat(item.priceChg);
            item.zsz = unitFormat(item.marketVal);
            item.hsl = unitFormat(item.turnoverRatio);
            item.zx = unitFormat(item.priceNow);
            item.fontColor = item.priceChg > 0 ? "red" : "green";

            // console.log(item.z);
            zList.push(item.z);

            item.title = item.stockName;

            // console.log(dataFormat(item[this.send.bubbleColor]))
            item.color = colorType(
              this.send.bubbleColor,
              dataFormat(item[this.send.bubbleColor])
            );
            return item;
          });
          // console.log(zList);

          console.log(this.send);
          // console.log(this.dataList)

          this.drow();
        }
      });
    },
    drow() {
      chart = Highcharts.chart("container", {
        chart: {
          type: "bubble",
          spacing: [10, 10, 10, 10],
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: null,
        },
        xAxis: {
          title: {
            text: this.titleX,
            // align: "high",
            // offset: 15,
            margin: 10,
            rotation: 0,
            // y: -8,
            // x:10,
          },
          labels: {
            zIndex: 1,
            // format: "{value}",
            formatter: function () {
              if (this.value > 0) {
                return '<div style="color:#EA2827">' + this.value + "</div>";
              } else if (this.value == 0) {
                return '<div style="color:#BCBFC4">' + this.value + "</div>";
              } else {
                return '<div style="color:#61C869">' + this.value + "</div>";
              }
            },
          },
        },
        yAxis: {
          startOnTick: false,
          endOnTick: false,
          title: {
            text: this.titleY,
            align: "middle",
            y: -10,
          },
          labels: {
            formatter: function () {
              if (this.value > 0) {
                return '<div style="color:#EA2827">' + this.value + "</div>";
              } else if (this.value == 0) {
                return '<div style="color:#BCBFC4">' + this.value + "</div>";
              } else {
                return '<div style="color:#61C869">' + this.value + "</div>";
              }
            },
          },
          useHTML: true,
          maxPadding: 0.2,
        },
        zAxis: {},
        tooltip: {
          useHTML: true,
          followPointer: true,
          headerFormat: "<table>",
          pointFormat:
            '<tr><th colspan="2"><span style="font-size:15px">{point.stockCode}&nbsp;&nbsp;{point.title}</span></th></tr>' +
            '<tr><th class="th-color">最新:</th><td class="{point.fontColor}">{point.zx}</td></tr>' +
            '<tr><th class="th-color">涨跌幅:</th><td class="{point.fontColor}">{point.zdf}%</td></tr>' +
            '<tr><th class="th-color">流通市值:</th><td>{point.ltsz}</td></tr>' +
            '<tr><th class="th-color">总市值:</th><td>{point.zsz}</td></tr>' +
            '<tr><th class="th-color">换手率:</th><td>{point.hsl}%</td></tr>',
          footerFormat: "</table>",
          //
        },
        plotOptions: {
          bubble: {
            maxSize: "120",
          },
          series: {
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              // allowOverlap: true, //设置允许重叠
              format: "{point.name}",
              // filter: {
              //   property: "z",
              //   operator: ">",
              //   value: 0,
              // },
            },
            point: {
              events: {
                click: (e) => {
                  console.log(e.point.securityId, e.point.stockCode);
                  const codeType = String(e.point.securityId).substr(0, 1);
                  // codeType = codeType.substr(0,1);
                  const type = codeType == 2 ? "0" : "1";
                  console.log(type);

                  // const code = e.point.stockCode.toString()
                  // console.log(typeof code)

                  window.prompt(
                    "",
                    `up://["open.stock",${Date.now()},{"type":"可视化选股","setcode":"${type}","code":"${
                      e.point.stockCode
                    }"}]`
                  );
                },
              },
            },
          },
        },
        series: [{ data: this.dataList }],
      });
    },
  },
};
// 主题颜色
Highcharts.theme = {
  chart: {
    backgroundColor: "#090910",
    borderColor: "#1E2127",
  },
  tooltip: {
    backgroundColor: "#1D202C",
    borderColor: "#414663",
    style: {
      color: "#F0F0F0",
    },
  },
  plotOptions: {
    series: {
      dataLabels: {
        style: {
          fontWeight: "400",
          fontSize: "13px",
          color: "#ffffff",
          textOutline: "none",
        },
      },
    },
  },
};

Highcharts.setOptions(Highcharts.theme);
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#visual {
  width: 100%;
}
.vissual-box {
  display: flex;
}
.visual-left {
  width: 384px;
  margin-right: 10px;
  .top,
  .bottom {
    padding: 16px 10px;
    // height: 300px;
    border: 2px solid rgba(39, 40, 46, 1);
    border-radius: 6px;
    box-sizing: border-box;

    .item {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      .rotation {
        position: absolute;
        top: 20px;
        right: 14px;
        width: 17px;
        height: 53px;
        border: 2px dashed rgba(56, 58, 67, 1);
        border-left: none;
        border-radius: 1px;
        .circle {
          position: absolute;
          right: -18px;
          top: 10px;
          width: 30px;
          height: 30px;
          // background: linear-gradient(
          //   0deg,
          //   rgba(68, 103, 213, 1),
          //   rgba(121, 165, 242, 1)
          // );
          background: url($PIC_URL + "/tlbypcWeb/visualStock/zhuanhuan.png")
            no-repeat;
          background-size: 100% 100%;
          border: 2px solid rgba(39, 40, 46, 1);
          border-radius: 15px;
        }
      }
      &:last-child {
        margin: 0;
      }
      &.left {
        justify-content: flex-start;
      }
      .name {
        display: flex;
        align-items: center;
        justify-content: left;
        color: #bcbfc4;
        font-size: 15px;
        padding-left: 12px;
        width: 109px;
        height: 30px;
        background: rgba(28, 29, 33, 1);
        border: 1px solid rgba(39, 40, 46, 1);
        box-sizing: border-box;
      }
    }
  }
  .bottom {
    margin-top: 10px;
    // height: 542px;
  }
}
.visual-right {
  flex-grow: 1;
  border: 2px solid rgba(39, 40, 46, 1);
  border-radius: 6px;
  .title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px;
    background: #27282e;
    border-radius: 6px 6px 0px 0px;
    color: #bcbfc4;
    font-size: 16px;
    font-weight: 400;
    span {
      display: block;
    }
    .coord,
    .reset {
      width: 60px;
      margin-right: 10px;
      margin-left: 40px;
    }
    .line {
      text-align: center;
      width: 30px;
    }
    .reset {
      width: 90px;
      i {
        margin-right: 6px;
      }
    }
  }
  .slider-rows {
    width: 660px;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 0 21px;
    background: rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 1px 0px rgba(50, 50, 61, 1),
      0px -2px 2px 0px rgba(0, 0, 0, 0.09),
      0px -1px 2px 0px rgba(136, 161, 136, 0.35);
    border-radius: 18px;
  }
  .slider-column {
    float: right;
    margin-top: 30px;
    margin-right: 40px;
    width: 35px;
    height: 620px;
    box-sizing: border-box;
    padding: 20px 0 10px 0;

    background: rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 1px 0px rgba(50, 50, 61, 1),
      0px -2px 2px 0px rgba(0, 0, 0, 0.09),
      0px -1px 2px 0px rgba(136, 161, 136, 0.35);
    border-radius: 18px;
  }
}
.visual-footer {
  margin-top: 10px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  .hint {
    width: 1000px;
    color: #bcbfc4;
    font-size: 14px;
  }
  .color {
    display: flex;
    .color-item {
      font-size: 16px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 68px;
      margin-left: 2px;
    }
  }
}
</style>
<style lang="scss">
.el-tooltip__popper.is-dark {
  color: #bcbfc4;
  /* width: 25px; */
  height: 8px;
  line-height: 8px;
  font-size: 15px;
  text-align: center;
  background: linear-gradient(180deg, rgba(70, 76, 98, 1), rgba(28, 29, 33, 1));
  border: 1px solid rgba(91, 91, 109, 1);
  box-shadow: 1px 0px 1px 0px rgba(136, 161, 136, 0.35),
    -1px 0px 1px 0px rgba(0, 0, 0, 0.74),
    -1px 0px 0px 0px rgba(136, 161, 136, 0.35);
  border-radius: 2px;
}

.el-input__inner {
  color: #fff;
  text-align: center;
  font-size: 15px;
  width: 256px;
  height: 30px;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(39, 40, 46, 1);
  border-radius: 0;
}
.el-input_xy .el-input__inner {
  width: 216px !important;
}
.title .el-input-number {
  width: 71px;
  line-height: 28px;
}
.title .el-input {
  width: 71px;
  height: 28px;
}
.title .el-input__inner {
  width: 77px;
  height: 28px;
  background: rgba(9, 9, 16, 1);
  border: 1px solid rgba(65, 67, 73, 1);
  box-shadow: 0px 2px 1px 0px rgba(5, 6, 12, 0.5);
  border-radius: 4px;
}

.el-select-dropdown {
  text-align: center;
  color: #bcbfc4;
  font-size: 15px;
  border-radius: 0;
  height: 240px;
  background: rgba(28, 29, 33, 1);
  border: 1px solid rgba(53, 73, 124, 1);
  overflow: scroll;
}
.el-select .el-input .el-select__caret {
  color: #4f505e;
  font-size: 17px;
}
.el-icon-arrow-up:before {
  content: "\e78f";
}

.el-select-dropdown__item {
  font-size: 15px;
  height: 26px;
  line-height: 26px;
}
.el-select-dropdown__item.selected {
  color: #fff;
  background-color: #1d202c;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #fff;
  background-color: #1d202c;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none !important;
}
.slider-rows .el-slider__runway {
  height: 10px;
  margin: 10px 0;
  background: rgba(9, 9, 16, 1);
  box-shadow: 0px -1px 3px 0px rgba(98, 146, 98, 0.35),
    0px 2px 4px 0px rgba(0, 0, 0, 0.74),
    0px 1px 1px 0px rgba(147, 187, 147, 0.35);
  border-radius: 5px;
}
.slider-column .el-slider__runway {
  width: 50px;
  height: 580px;
  background: rgba(9, 9, 16, 1);
  box-shadow: -2px 0px 4px 0px rgba(98, 146, 98, 0.35),
    -1px 0px 1px 0px rgba(0, 0, 0, 0.74),
    1px 0px 1px 0px rgba(147, 187, 147, 0.35);
  border-radius: 5px;
}

.highcharts-xaxis-grid .highcharts-grid-line {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-xaxis .highcharts-tick {
  stroke-width: 1px;
  stroke: none;
}
.highcharts-yaxis-grid .highcharts-grid-line {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-axis-line {
  stroke-width: 1px;
  stroke: #1e2127;
}

.highcharts-minor-grid-line {
  stroke-dasharray: 10, 10;
}
.highcharts-plot-border {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-background {
  stroke-width: 0;
}
path {
  stroke-width: 0;
}
.slider-rows .el-slider__button {
  width: 34px;
  height: 20px;
  background: url($PIC_URL + "/tlbypcWeb/backups/hk_heng.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  border: 0;
}

.slider-column .el-slider__button {
  width: 20px;
  height: 34px;
  background: url($PIC_URL + "/tlbypcWeb/backups/hk_shu.png") no-repeat;
  background-size: 100%;
  border-radius: 0;
  border: 0;
}
.slider-rows .el-slider__bar {
  background: linear-gradient(0deg, #4467d5, #79a5f2);
  box-shadow: 0px -1px 1px 0px rgba(98, 146, 98, 0.35),
    0px -2px 3px 0px rgba(0, 0, 0, 0.67),
    0px 3px 4px 0px rgba(147, 187, 147, 0.35);
}

.slider-column .el-slider__bar {
  background: linear-gradient(-90deg, #4467d5, #79a5f2);
  box-shadow: -1px 0px 1px 0px rgba(98, 146, 98, 0.35),
    -2px 0px 4px 0px rgba(0, 0, 0, 0.74),
    3px 0px 4px 0px rgba(147, 187, 147, 0.35);
}

.red {
  color: #ea2827;
}
.green {
  color: #61c869;
}
.th-color {
  color: #b667ff;
}
</style>
